<template>
  <a-form auto-label-width layout="inline">
    <a-form-item label="是否显示">
      <a-switch size="small" v-model="animation.animation" />
    </a-form-item>
    <a-form-item label="动画时长">
      <a-input-number size="small" v-model="animation.animationDuration" />
    </a-form-item>
    <a-form-item label="动画效果">
      <a-select size="small" v-model="animation.animationEasing">
        <a-option value="linear">linear</a-option>
        <a-option value="quadraticIn">quadraticIn</a-option>
        <a-option value="quadraticOut">quadraticOut</a-option>
        <a-option value="quadraticInOut">quadraticInOut</a-option>
        <a-option value="cubicIn">cubicIn</a-option>
        <a-option value="cubicOut">cubicOut</a-option>
        <a-option value="cubicInOut">cubicInOut</a-option>
        <a-option value="quarticIn">quarticIn</a-option>
        <a-option value="quarticOut">quarticOut</a-option>
        <a-option value="quarticInOut">quarticInOut</a-option>
        <a-option value="quinticIn">quinticIn</a-option>
        <a-option value="quinticOut">quinticOut</a-option>
        <a-option value="quinticInOut">quinticInOut</a-option>
        <a-option value="sinusoidalIn">sinusoidalIn</a-option>
        <a-option value="sinusoidalOut">sinusoidalOut</a-option>
        <a-option value="sinusoidalInOut">sinusoidalInOut</a-option>
        <a-option value="exponentialIn">exponentialIn</a-option>
        <a-option value="exponentialOut">exponentialOut</a-option>
        <a-option value="exponentialInOut">exponentialInOut</a-option>
        <a-option value="circularIn">circularIn</a-option>
        <a-option value="circularOut">circularOut</a-option>
        <a-option value="circularInOut">circularInOut</a-option>
        <a-option value="elasticIn">elasticIn</a-option>
        <a-option value="elasticOut">elasticOut</a-option>
        <a-option value="elasticInOut">elasticInOut</a-option>
        <a-option value="backIn">backIn</a-option>
        <a-option value="backOut">backOut</a-option>
        <a-option value="backInOut">backInOut</a-option>
        <a-option value="bounceIn">bounceIn</a-option>
        <a-option value="bounceOut">bounceOut</a-option>
        <a-option value="bounceInOut">bounceInOut</a-option>
      </a-select>
    </a-form-item>
  </a-form>
</template>
<script setup>
defineOptions({
  name: "echarts-animation"
})
const attrs = useAttrs()
const { animation } = attrs.option
</script>
<style scoped lang="less">
.bi-bar {
  width: 100%;
  height: 100%;
}
</style>
